<style lang="sass" scoped>
    .container{
        padding-bottom: 130px;
    }
    .top{
        height:440px;
        img{
            display:block;
            width:100%;
            height:100%;
        }
    }
    .cont{
        padding-top:10px;
        background:#e6e6e6;
        .group{
            background:#fff;
            margin-bottom:10px;
            padding:18px 36px;
            .img{
                width:262px;
                height:262px;
                background:#ccc;
                img{
                    display:block;
                    width:100%;
                    height:100%;
                }
            }
            .detail{
                width:388px;
                margin-left:30px;
                flex-direction: column;
                .detail-cont{
                    flex:1;
                    .name{
                        font-size:28px;
                        color:#3c3c3c;
                    }
                    .title{
                        font-size:22px;
                        color:#3c3c3c;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .paid{
                        font-size: 22px;
                        color: #bebebe;
                    }
                }
                .buy{
                    height: 56px;
                    justify-content: space-between;
                    .price{
                        width: 200px;
                        color: #ff6e6e;
                        .currency{
                            font-size: 22px
                        }
                        .big{
                            font-size: 44px;
                        }
                        .small{
                            font-size: 34px;
                        }
                    }
                    .btn{
                        width: 160px;
                        height: 56px;
                        line-height: 56px;
                        text-align: center;
                        font-size: 34px;
                        background: #fff;
                        color: #ff6e6e;
                        border:1px solid #ff6e6e;
                    }
                }
            }
        }
        // .group:nth-child(2n-1){
        //     .btn{
        //         background: #ff6e6e;
        //         color: #fff;
        //         border:1px solid #ff6e6e;
        //     }
        // }
        // .group:nth-child(2n){
        //     .btn{
        //         background: #fff;
        //         color: #ff6e6e;
        //         border:1px solid #ff6e6e;
        //     }
        // }
    }
    .buy-all{
        height:130px;
        position:fixed;
        bottom:0;
        width:100%;
        z-index:10;
        background:#ff6e6e;
        align-items:center;
        justify-content:center;
        .text{
            color:#fff;
            font-size:48px;
            height:52px;
            line-height:52px;
            margin-right:10px;
        }
        .price-cont{
            align-items:flex-end;
            height:52px;
            .currency{
                color:#fff;
                font-size:24px;
            }
            .price{
                color:#fff;
                font-size:48px;
                height:50px;
                line-height:50px;
            }
        }
    }
</style>
<template>
    <div class="container">
        <div class="top">
            <img :src="imageUrl" alt="">
        </div>
        <div class="cont">
            <router-link :to="{name:'detail',query:{itemCode:item.itemCode}}" tag="div" v-for="(item,i) in list" class="group flex">
                <div class="img">
                    <img :src="item.mainImageUrl" alt="">
                </div>
                <div class="detail flex">
                    <div class="detail-cont">
                        <div class="name">{{item.itemName}}</div>
                        <div class="title">{{item.itemDesc}}</div>
                        <div class="paid">{{item.buyCount}}人付款</div>
                    </div>
                    <div class="buy flex">
                        <div class="price">
                            <span class="currency">￥</span>
                            <span class="big">{{item.price}}</span>
                        </div>
                        <div @click.stop="addBook(item)" class="btn">加入书袋</div>
                    </div>
                </div>
            </router-link>
        </div>

        <div @click.stop="buyAll()" class="buy-all flex">
            <div class="text">一键购买</div>
            <div class="price-cont flex">
                <div class="currency">￥</div>
                <div class="price">{{totalFee}}</div>
            </div>
        </div>

        <bookcar></bookcar>
        <totop></totop>
    </div>
</template>
<script>
    import totop from "commonvue/totop";
    import bookcar from "commonvue/bookcar";
    export default {
        components: {
            totop,
            bookcar,
        },
        data() {
            return {
                search:{
                    contextId:'',//	是	string	类目ID
                    // startNum:0,//	是	string	下一页开始值
                },
                imageUrl:'',
                end:false,
                list:[],
                totalFee:0,
            };
        },
        watch:{
        },
        created(){
            this.search.contextId = this.$route.query.contextId;
        },
        mounted() {
            this.$nextTick(() => {
                if(this.$route.query.contextId){
                    this.getList();
                }
            });
        },
        methods: {
            getList(){
                let param = JSON.parse(JSON.stringify(this.search));
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/item/getItemListByColumnCode',
                    data:param,
                    success:(data=>{
                        this.list = data.data.itemList;
                        this.totalFee = data.data.totalFee;
                        // this.search.startNum = data.data.startNum;
                        this.imageUrl = data.data.imageUrl;
                    })
                })
            },
            addBook(item){
                server.addShoppingCar(item.itemCode)
            },
            buyAll(){
                let list = JSON.parse(JSON.stringify(this.list));
                let arr = [];
                list.forEach((item,i) => {
                    arr.push(item.itemCode)
                });
                router.push({name:'order_confirm',query:{itemCode:arr.toString()}})
            }
        },
        
    };
</script>